const path = require("path")

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require("webpack")
module.exports = {

    entry: {
        chunk:["react","react-dom/client"],
        app: {
            import: path.resolve(__dirname, "../", "src/main.js"),
            dependOn:"chunk"
        } 
    },

    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: "js/[name].[chunkhash:8].js",
        clean: true,
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../", 'public/index.html'),
            inject: "body",
            filename: "index.html",
            title: "vue-element-admin",
            favicon: path.resolve(__dirname, "../", "public/favicon.ico")
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage === 1) {
                    console.log("100% 打包成功");
                } else {
                    // console.log(`${Math.floor(percentage * 100)}`);
                }
            }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js"),
        })
    ],
    module: {
        rules: [
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },
            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] },
            {
                test: /\.(png|jpg|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            },
        ]
    },
    resolve: {
        alias: {
            "@":path.resolve(__dirname,"../","src")
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
}